<template>
	<view class="content">
		<view class="" v-if="!temState">
			<view class="card_goods_list">
				<u-swipe-action>
					<u-swipe-action-item
						ref="action"
						:options="options"
						v-for="(item, index) in cartList"
						@click.stop="delGoodsArray(item.id, index)"
						:key="item.id"
					>
						<view class="goods" @click="Topath('/pages/index/detail?id=' + item.goodsId)">
							<view class="left" @click.stop="selectGoodsTap(index)">
								<aicon
									v-if="item.sltState === 1"
									type="roundcheckfill"
									:color="templateConfig.page.themeColor"
									size="25"
								></aicon>
								<aicon v-else type="round" color="#eee" size="25"></aicon>
							</view>
							<view class="center">
								<view
									class=""
									v-if="item.goodsSpecification.length > 0 && item.goodsSpecification[0] != null"
								>
									<image
										v-if="item.goodsSpecification[0].specificationImages != ''"
										:src="item.goodsSpecification[0].specificationImages"
										lazy-load
										:lazy-load-margin="0"
									></image>
									<image
										v-else
										:src="item.plugsGoods.rotationImgsJson[0]"
										lazy-load
										:lazy-load-margin="0"
									></image>
								</view>
								<view class="" v-else>
									<image
										:src="item.plugsGoods.rotationImgsJson[0]"
										lazy-load
										:lazy-load-margin="0"
									></image>
								</view>
							</view>
							<view class="right">
								<view class="name_box">
									<view class="title">{{ item.plugsGoods.goodsName }}</view>
								</view>
								<view
									class="goodsSpec"
									v-if="item.goodsSpecification.length > 0 && item.goodsSpecification[0] != null"
								>
									<view
										v-for="(value, key) in JSON.parse(item.goodsSpecification[0].specificationName)"
										:key="key"
									>
										{{ key + ':' + value }}
									</view>
								</view>
								<view class="box">
									<view class="">
										<view
											class="price"
											:style="{ color: templateConfig.page.themeColor }"
											v-if="
												item.goodsSpecification.length > 0 && item.goodsSpecification[0] != null
											"
										>
											<span>¥</span>
											{{ item.goodsSpecification[0].dealPrice }}
										</view>
										<view class="price" :style="{ color: templateConfig.page.themeColor }" v-else>
											<span>¥</span>
											{{ item.plugsGoods.goodsPrice }}
										</view>
									</view>
									<view class="numbox">
										<view
											class=""
											v-if="
												item.goodsSpecification.length > 0 && item.goodsSpecification[0] != null
											"
										>
											<view v-if="item.goodsSpecification[0].stockNum > 0" class="buy">
												<view class="btn" @click.stop="numberChange(index, 'jian')">
													<aicon
														type="indeterminate-circle-fill"
														size="25"
														:color="
															item.goodsNum <= 1 ? '#eee' : templateConfig.page.themeColor
														"
													></aicon>
												</view>
												<view class="input">
													<input type="number" disabled :value="item.goodsNum" />
												</view>
												<view class="btn" @click.stop="numberChange(index, 'jia')">
													<aicon
														type="add-circle-fill"
														size="25"
														:color="templateConfig.page.themeColor"
													></aicon>
												</view>
											</view>
											<view v-else class="none">库存不足</view>
										</view>
										<view class="" v-else>
											<view v-if="item.plugsGoods.stockNum > 0" class="buy">
												<view class="btn" @click.stop="numberChange(index, 'jian')">
													<aicon
														type="indeterminate-circle-fill"
														size="25"
														:color="
															item.goodsNum <= 1 ? '#eee' : templateConfig.page.themeColor
														"
													></aicon>
												</view>
												<view class="input">
													<input type="number" disabled :value="item.goodsNum" />
												</view>
												<view class="btn" @click.stop="numberChange(index, 'jia')">
													<aicon
														type="add-circle-fill"
														size="25"
														:color="templateConfig.page.themeColor"
													></aicon>
												</view>
											</view>
											<view v-else class="none">库存不足</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</u-swipe-action-item>
				</u-swipe-action>
				<view class="none_list_box" v-if="cartList.length === 0" style="height: 40vh">
					<image src="../../static/images/none_data_icon_01.png" lazy-load="true" mode="widthFix"></image>
					<span>购物车空空的</span>
				</view>
			</view>

			<view class="hot-goods" v-if="cartList.length == 0">
				<view class="hot-goods-title">
					<view class="hot-text">
						<u-icon name="heart-fill" :color="templateConfig.page.themeColor" size="20"></u-icon>
						猜您喜欢
					</view>
				</view>
				<view class="hot-goods-box">
					<view class="goods-block" v-for="(item, index) in tuijianArray" :key="index">
						<view class="goods-box">
							<image
								class="goods-img"
								:src="item.rotationImgsJson[0]"
								mode="aspectFit"
								@click="Topath(`/pages/index/detail?id=${item.id}`)"
							></image>
							<view class="goods-name" @click="Topath(`/pages/index/detail?id=${item.id}`)">
								{{ item.goodsName }}
							</view>
							<view class="goods-price">
								<view
									class="price"
									:style="{ color: templateConfig.page.themeColor }"
									@click="Topath(`/pages/index/detail?id=${item.id}`)"
								>
									<view class="price-left" v-if="item.goodsSpecificationList == null">
										<text>￥</text>
										<text class="price-text">{{ item.goodsPrice }}</text>
									</view>
									<view class="price-left" v-else>
										<text>￥</text>
										<text class="price-text">{{ item.goodsSpecificationList[0].dealPrice }}</text>
									</view>
								</view>
								<u-icon
									name="shopping-cart"
									:color="templateConfig.page.themeColor"
									size="28"
									@click="addToCart(item)"
								></u-icon>
							</view>
							<view class="month_sales"></view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="cartList.length > 0" class="card_footer">
				<view class="label">
					<view class="left" @click="cartSelectAll()">
						<aicon
							v-if="selectAll"
							type="roundcheckfill"
							:color="templateConfig.page.themeColor"
							size="25"
						></aicon>
						<aicon v-else type="round" color="#eee" size="25"></aicon>
						<span style="color: #333">全选</span>
					</view>
					<view class="right">
						<view class="price">
							合计：
							<span :style="{ color: templateConfig.page.themeColor }">¥{{ cartTotalMoney }}</span>
						</view>
						<view
							class="btn_box"
							@click="createOrder()"
							:style="{ background: templateConfig.page.themeColor }"
						>
							立即下单
						</view>
					</view>
				</view>
			</view>
			<tabbar
				:current="2"
				:cart="cartNums"
				:tabbarList="templateConfig.tabbarList"
				:template="templateConfig"
			></tabbar>
		</view>
		<view class="" v-else>
			<expire></expire>
		</view>
	</view>
</template>

<script>
import {
	insertPlugsShopCart,
	getHomeDataInfo,
	getPlugsShopCartByUserId,
	delPlugsShopCart,
	updatePlugsShopCart,
	searchPlugsGoodsList,
	searchPlugsGoodsSpecificationByGoodsId,
	searchHotGoodsList
} from '../../static/utils/api.js';
export default {
	data() {
		return {
			templateConfig: uni.getStorageSync('templateConfig'),
			temState: uni.getStorageSync('templateExpireTime'),
			nowBusinessInfo: {},
			options: [
				{
					text: '删除'
				}
			],
			cartList: [],
			cartTotalMoney: 0,
			selectAll: false,
			cartSelectList: [],
			hotGoodsList: [],
			cartNums: 0,
			tuijianArray: [],
			orderPage: {
				page: 1,
				sizes: 10,
				total: 0
			},
		};
	},

	onShow() {
		uni.setNavigationBarTitle({
			title: this.templateConfig.tabbarList[2].iconName
		});
		this.nowBusinessInfo = uni.getStorageSync('nowBusinessInfo');
		this.getCartList();
		this.getHomeDataInfo();
	},
	onLoad() {},
	onReachBottom() {
		let that = this;
		if (that.orderPage.total > that.orderPage.page) {
			that.orderPage.page++;
			that.getCartList();
		}
	},
	methods: {
		// 获取购物车商品列表
		getCartList() {
			let data = {
				page: 1,
				size: 100,
				businessId: this.nowBusinessInfo.businessId.toString(),
				userServiceToken: this.userToken
			};
			getPlugsShopCartByUserId(data).then((res) => {
				if (res.code === 200) {
					let nums = 0;
					this.cartList = res.body.list;
					res.body.list.forEach((item) => {
						if (item.plugsGoods.rotationImgsJson) {
							item.plugsGoods.rotationImgsJson = JSON.parse(item.plugsGoods.rotationImgsJson);
						}
						if (item.goodsSpecification.length > 0 && item.goodsSpecification[0] != null) {
							if (item.goodsSpecification[0].stockNum > 0) {
								item.sltState = 1;
							}
						} else {
							if (item.plugsGoods.stockNum > 0) {
								item.sltState = 1;
							}
						}
					});
					this.cartNums = res.body.total;
					uni.setStorageSync('goodsNum', this.cartNums);
					this.calcTotal();
				}
			});
		},
		// 猜您喜欢
		getHomeDataInfo() {
			let data = {
				businessId: this.nowBusinessInfo.businessId.toString(),
				recommendationStatus: 1,
				size: 100
			};
			searchHotGoodsList(data).then((res) => {
				if (res.code == 200) {
					res.body.list.forEach((item) => {
						if (item.rotationImgsJson) {
							item.rotationImgsJson = JSON.parse(item.rotationImgsJson);
						}
					});
					this.tuijianArray = [];
					for (let i = 0; i < res.body.list.length; i++) {
						if (i > 5) {
							break;
						} else {
							this.tuijianArray.push(res.body.list[i]);
							// this.categoryList = res.body.list
						}
					}
				}
			});
		},
		// 全选
		cartSelectAll() {
			if (!this.selectAll) {
				this.cartList.forEach((item) => {
					if (item.goodsSpecification.length > 0 && item.goodsSpecification[0] != null) {
						if (item.goodsSpecification[0].stockNum > 0) {
							item.sltState = 1;
						}
					} else {
						if (item.plugsGoods.stockNum > 0) {
							item.sltState = 1;
						}
					}
				});
			} else {
				this.cartList.forEach((item) => {
					item.sltState = 0;
				});
			}
			this.selectAll = !this.selectAll;
			this.calcTotal();
		},
		// 选中
		selectGoodsTap(index) {
			let that = this;
			let data = that.cartList[index];
			let select = that.cartList[index].sltState;
			if (data.goodsSpecification.length > 0 && data.goodsSpecification[0] != null) {
				if (data.goodsSpecification[0].stockNum > 0) {
					if (select == 0) {
						that.cartList[index].sltState = 1;
						console.log(that.cartList[index], 99);
					} else {
						that.cartList[index].sltState = 0;
						console.log(that.cartList[index], 88);
					}
				} else {
					uni.showToast({
						title: '库存不足',
						duration: 800
					});
				}
			} else {
				if (data.plugsGoods.stockNum > 0) {
					if (select == 0) {
						that.cartList[index].sltState = 1;
					} else {
						that.cartList[index].sltState = 0;
					}
				} else {
					uni.showToast({
						title: '库存不足',
						duration: 800
					});
				}
			}
			that.calcTotal();
		},

		// 删除商品
		delGoodsArray(i, index) {
			let that = this;
			let postData = `ids=${i}`;
			uni.showModal({
				title: '提示',
				content: '确定要删除吗?',
				success: function (res) {
					if (res.confirm) {
						delPlugsShopCart(postData).then((res) => {
							if (res.code == 200) {
								that.cartList.splice(index, 1);
								that.getCartList();
							}
						});
					} else if (res.cancel) {
					}
				}
			});
		},
		//计算总价
		calcTotal() {
			let list = this.cartList;
			let total = 0;
			let checked = true;
			list.forEach((item) => {
				if (item.sltState == 1) {
					console.log(item.plugsGoods.goodsPrice, item.goodsNum, 456);
					if (item.goodsSpecification.length > 0 && item.goodsSpecification[0] != null) {
						total += item.goodsSpecification[0].dealPrice * item.goodsNum;
					} else {
						total += item.plugsGoods.goodsPrice * item.goodsNum;
					}
				} else if (checked === true) {
					checked = false;
				}
			});
			this.selectAll = checked;
			this.cartTotalMoney = Number(total.toFixed(2));
		},

		createOrder() {
			let list = this.cartList;
			let goodsData = [];
			list.forEach((item) => {
				if (item.sltState == 1) {
					goodsData.push(item);
				}
			});

			let showStuts = 0;
			goodsData.forEach((item) => {
				if (item.goodsSpecification.length > 0 && item.goodsSpecification[0] != null) {
					if (item.goodsNum > item.goodsSpecification[0].stockNum) {
						showStuts = 1;
					}
				} else {
					if (item.goodsNum > item.plugsGoods.stockNum) {
						showStuts = 1;
						console.log(123);
					}
				}
			});
			if (showStuts == 1) {
				uni.showModal({
					title: '提示',
					content: '当前购物车中商品有库存不足，是否一键移除多余数量',
					success: (res) => {
						if (res.confirm) {
							goodsData.forEach((item) => {
								if (item.goodsSpecification.length > 0 && item.goodsSpecification[0] != null) {
									if (item.goodsNum > item.goodsSpecification[0].stockNum) {
										item.goodsNum = item.goodsSpecification[0].stockNum;
									}
								} else {
									if (item.goodsNum > item.plugsGoods.stockNum) {
										item.goodsNum = item.plugsGoods.stockNum;
									}
								}
							});
							this.calcTotal();
							return;
						} else if (res.cancel) {
							return;
						}
					}
				});
				return;
			}

			if (goodsData.length <= 0) {
				uni.showToast({
					icon: 'none',
					title: '请选择您要下单的商品',
					duration: 700
				});
				return;
			}
			uni.setStorage({
				key: 'shopCart',
				data: goodsData,
				success: () => {
					uni.navigateTo({
						url: `/pages/order/paypal`
					});
				}
			});
		},

		// 加入购物车
		addToCart(item) {
			let token = uni.getStorageSync('userInfo').accessToken;
			if (token == null) {
				uni.showModal({
					title: '提示',
					content: '登录才能添加宝贝哦~',
					success: function (res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/user/login'
							});
						} else if (res.cancel) {
						}
					}
				});
			} else {
				searchPlugsGoodsSpecificationByGoodsId({
					goodsId: item.id
				}).then((res) => {
					if (res.code == 200) {
						if (res.body.plugsGoodsSpecificationList.length == 0) {
							let postData = {
								businessId: this.nowBusinessInfo.businessId.toString(),
								goodsId: item.id,
								goodsCategoryId: item.categoryId,
								goodsNum: 1,
								goodsSpecificationIds: '0'
							};
							if (item.stockNum <= 0) {
								uni.showModal({
									title: '提示',
									content: '库存不足!',
									showCancel: false
								});
								return;
							}
							insertPlugsShopCart(postData).then((res) => {
								if (res.code == 200) {
									uni.showToast({
										title: '加入成功',
										icon: 'none'
									});
									this.getCartList();
								}
							});
						} else {
							let postData = {
								businessId: this.nowBusinessInfo.businessId.toString(),
								goodsId: item.id,
								goodsCategoryId: item.categoryId,
								goodsNum: 1,
								goodsSpecificationIds: res.body.plugsGoodsSpecificationList[0].id
							};
							if (res.body.plugsGoodsSpecificationList[0].stockNum <= 0) {
								uni.showModal({
									title: '提示',
									content: '库存不足!',
									showCancel: false
								});
								return;
							}
							insertPlugsShopCart(postData).then((res) => {
								if (res.code == 200) {
									uni.showToast({
										title: '加入成功',
										icon: 'none'
									});
									this.getCartList();
								}
							});
						}
					}
				});
			}
		},

		//数量
		numberChange(index, type) {
			let nums = this.cartList[index].goodsNum;
			let list = this.cartList[index].goodsSpecification;
			let stok = 0;

			let data = {
				businessId: this.cartList[index].businessId,
				goodsCategoryId: this.cartList[index].goodsCategoryId,
				goodsSpecificationIds: this.cartList[index].goodsSpecificationIds,
				goodsNum: 1,
				goodsId: this.cartList[index].goodsId,
				type: 0
			};
			if (list.length == 0) {
				stok = this.cartList[index].plugsGoods.stockNum;
			} else {
				stok = this.cartList[index].goodsSpecification[0].stockNum;
			}
			if (type === 'jian') {
				if (nums > 1) {
					data.type = 1;
					insertPlugsShopCart(data).then((res) => {
						// console.log("insertPlugsShopCart", res)
						if (res.code == 200) {
							this.cartList[index].goodsNum--;
							this.calcTotal();
						} else {
						}
					});
				} else {
					return;
				}
			} else if (type === 'jia') {
				if (nums < stok) {
					data.type = 0;
					insertPlugsShopCart(data).then((res) => {
						// console.log("insertPlugsShopCart", res)
						if (res.code == 200) {
							this.cartList[index].goodsNum++;
							this.calcTotal();
						} else {
						}
					});
				} else {
					uni.showToast({
						title: '已超过最大库存数量',
						icon: 'none'
					});
					return;
				}
			}
		},

		Topath(route) {
			uni.navigateTo({
				url: route
			});
		}
	}
};
</script>

<style lang="less">
page {
	background-color: #fff;
}

.content {
	position: relative;
}

.fixed_head_box {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
}

.card_footer {
	position: fixed;
	bottom: 120rpx;
	left: 0;
	width: 100%;
	z-index: 1000;
	background-color: #fff;
	border-bottom: 3rpx solid #f5f5f5;
	padding-bottom: env(safe-area-inset-bottom);

	.label {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 90%;
		margin: 0 auto;
		height: 100rpx;

		.left {
			display: flex;
			align-items: center;
			color: #999;

			span {
				padding-left: 10rpx;
			}
		}

		.right {
			display: flex;
			align-items: center;

			.price {
				color: #1c1c1c;
				font-size: 28rpx;
				margin-right: 50rpx;

				span {
					color: #f54319;
					font-weight: bold;
					font-size: 30rpx;
				}
			}

			.btn_box {
				background-color: #f54319;
				color: #fff;
				width: 200rpx;
				height: 70rpx;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
			}
		}
	}

	.hover_label {
		height: 120rpx;
		width: 100%;
		border-top: 1px solid #f5f5f5;
	}
}

.hot-goods {
	width: 96%;
	margin-left: 2%;
	display: flex;
	flex-direction: column;
	align-items: center;

	.hot-goods-title {
		width: 70%;
		display: flex;
		justify-content: space-around;
		margin: 30rpx 0rpx;
		box-sizing: border-box;
		padding: 30rpx 80rpx;
		text-align: center;
		font-size: 26rpx;
		color: #909399;

		.hot-text {
			margin: 0rpx 26rpx;
			display: flex;
			align-items: center;
		}
	}

	.hot-goods-box {
		width: 100%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.goods-block {
			width: 48%;
		}

		.goods-box {
			// display: flex;
			width: 100%;
			height: 470rpx;
			border-radius: 16rpx;
			box-sizing: border-box;
			background-color: #fff;
			margin-bottom: 26rpx;
			// box-shadow: 0px 0px 16rpx 0px rgba(207, 207, 207, 0.5);
			border: 3rpx solid #f5f5f5;

			.goods-img {
				width: 100%;
				height: 340rpx;
				border-radius: 16rpx 16rpx 0 0;
			}

			.goods-name {
				width: 94%;
				margin: 10rpx auto;
				font-size: 28rpx;
				/**适用范围：因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；**/
				display: -webkit-box; //将对象作为弹性伸缩盒子模型显示
				-webkit-box-orient: vertical; //设置或检索伸缩盒对象的子元素的排列方式
				-webkit-line-clamp: 1; //一个块元素显示的文本的行数
				overflow: hidden; //溢出隐藏
			}

			.goods-price {
				width: 94%;
				margin: auto;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.price-right {
					margin-left: 12rpx;
					font-size: 26rpx !important;
					font-weight: 400 !important;
					color: #aaa;
					margin-left: 18rpx;
					text-decoration: line-through;
				}

				.price {
					color: #ff4544;

					.price-text {
						font-size: 34rpx;
						font-weight: 600;
					}
				}
			}

			.month_sales {
				width: 94%;
				margin: auto;
				font-size: 22rpx;
				color: #aaa;
			}
		}
	}
}

.content {
	padding-bottom: 50rpx;
	width: 100%;
	overflow-x: hidden;

	.cart-num {
		width: 100%;
		height: 80rpx;
		// margin: auto;
		padding-left: 20rpx;
		line-height: 80rpx;
		background-color: #fff;
		margin-bottom: 5rpx;
		border-bottom: 3rpx solid #f5f5f5;

		text {
			color: #f64319 !important;
		}
	}
}

.card_goods_list {
	width: 750rpx;
	overflow-x: hidden;
	height: 80vh;
	.goods {
		display: flex;
		justify-content: space-between;
		align-items: center;
		min-width: 0;
		border-bottom: 3rpx solid #f5f5f5;

		.left {
			width: 120rpx;
			height: 200rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.center {
			width: 200rpx;
			height: 240rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 20rpx;
			}
		}

		.right {
			flex: 1;
			min-width: 0;
			padding-left: 30rpx;
			height: 190rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.name_box {
				width: 95%;

				.title {
					font-size: 30rpx;
					color: #1c1c1c;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					// margin-bottom: 30rpx;
				}

				.intro {
					color: #999;
					font-size: 26rpx;
					padding-top: 12rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

			.goodsSpec {
				font-size: 26rpx;
				color: #999;
				display: -webkit-box; //将对象作为弹性伸缩盒子模型显示
				-webkit-box-orient: vertical; //设置或检索伸缩盒对象的子元素的排列方式
				-webkit-line-clamp: 3; //一个块元素显示的文本的行数
				overflow: hidden; //溢出隐藏
			}

			.box {
				width: 95%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.price {
					flex: 1;
					display: flex;
					align-items: center;
					font-size: 32rpx;
					font-weight: bold;
					color: #f54319;

					span {
						font-weight: normal;
						font-size: 26rpx;
						padding-right: 4rpx;
					}
				}

				.numbox {
					.none {
						color: #999;
						font-size: 26rpx;
					}

					.buy {
						display: flex;
						align-items: center;

						.btn {
							width: 50rpx;
							height: 50rpx;
							display: flex;
							align-items: center;
							justify-content: center;

							aicon {
								width: 100%;
								height: 100%;
								display: flex;
								align-items: center;
								justify-content: center;
							}
						}

						.input {
							width: 100rpx;
							height: 50rpx;
							background-color: #eee;
							margin: 0 6rpx;
							border-radius: 100rpx;

							input {
								width: 100%;
								height: 100%;
								text-align: center;
								font-size: 30rpx;
								color: #1c1c1c;
							}
						}
					}
				}
			}
		}
	}
}

.card_footer {
	position: fixed;
	bottom: 120rpx;
	left: 0;
	width: 100%;
	z-index: 1000;
	background-color: #fff;
	border-bottom: 3rpx solid #f5f5f5;
	padding-bottom: env(safe-area-inset-bottom);

	.label {
		.cart-bottom {
			width: 100%;
			background-color: #fff;
			border-top: 3rpx solid #e2e2e2;
			border-bottom: 3rpx solid #e2e2e2;
			box-shadow: 0px 0px 16rpx 0px rgba(207, 207, 207, 0.5);
			position: fixed;
			left: 0;
			// bottom: 110rpx;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 90%;
			margin: 0 auto;
			height: 100rpx;

			.left {
				display: flex;
				align-items: center;
				color: #999;

				span {
					padding-left: 10rpx;
				}
			}

			.right {
				display: flex;
				align-items: center;

				.price {
					color: #1c1c1c;
					font-size: 28rpx;
					margin-right: 50rpx;

					span {
						color: #f54319;
						font-weight: bold;
						font-size: 30rpx;
					}
				}

				.btn_box {
					background-color: #f54319;
					color: #fff;
					width: 200rpx;
					height: 70rpx;
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 30rpx;
				}
			}
		}

		.hover_label {
			height: 120rpx;
			width: 100%;
			border-top: 1px solid #f5f5f5;
		}
	}

	.hot_goods_list {
		padding-top: 50rpx;
		padding-bottom: 110rpx;

		.hot_head {
			width: 80%;
			margin: 0 auto;
			padding: 20rpx 0;
		}

		.goods_list {
			width: 92%;
			padding-top: 40rpx;
			margin: 0 auto;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.goods {
				flex-basis: 48%;
				margin-bottom: 30rpx;

				.image {
					image {
						width: 100%;
						height: 280rpx;
						border-top-left-radius: 20rpx;
						border-top-right-radius: 20rpx;
					}
				}

				.info {
					border: 1px solid #efefef;
					border-top: none;
					border-bottom-left-radius: 20rpx;
					border-bottom-right-radius: 20rpx;
					padding: 20rpx 0;
					min-width: 0;

					.title {
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						color: #1f1f1f;
						font-size: 28rpx;
						width: 90%;
						margin: 0 auto;
						max-width: 300rpx;

						span {
							background-color: #f54319;
							color: #fff;
							padding: 0 6rpx;
							border-radius: 6rpx;
							font-size: 24rpx;
							margin-right: 10rpx;
						}
					}

					.box {
						width: 90%;
						margin: 0 auto;
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding-top: 10rpx;

						.left {
							flex: 1;
							min-width: 0;
							min-height: 82rpx;
							display: flex;
							flex-direction: column;
							justify-content: center;

							.price {
								color: #f54319;
								font-size: 30rpx;

								span {
									color: #999;
									font-size: 26rpx;
									text-decoration: line-through;
									margin-left: 10rpx;
								}
							}

							.vip {
								color: #1f1f1f;
								font-size: 28rpx;
								display: flex;
								align-items: center;
								padding-top: 6rpx;

								span {
									background-color: #1f1f1f;
									color: gold;
									font-size: 20rpx;
									padding: 0 6rpx;
									border-top-left-radius: 10rpx;
									border-top-right-radius: 10rpx;
									border-bottom-right-radius: 10rpx;
									margin-left: 10rpx;
								}
							}

							.tuan {
								span {
									margin-left: 0;
									border-top-left-radius: 0;
									border-top-right-radius: 0;
									border-bottom-right-radius: 0;
									padding: 2rpx 10rpx;
									border-radius: 6rpx;
									background-color: gold;
									color: #1f1f1f;
								}
							}
						}

						.right {
							aicon {
								width: 56rpx;
								height: 56rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								border: 1px solid #f54319;
								border-radius: 100%;
							}
						}
					}
				}
			}
		}
	}
}
</style>
